<template>
    <div class="vue-ms-main  vue-ms-main-add" v-loading="loading">
        <div class="ms-top">
            <!-- 当前页标题  -->
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i><a @click="$router.push('/storevehicleList')">  用户管理</a> </el-breadcrumb-item>
                    <el-breadcrumb-item>用户编辑</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!--  添加 -->
        <div class = "ms-updmain">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="info">
                    <div class="fl upd-model" prop="userName">
                        <el-form-item label="用户名称" prop="userName">
                            <el-input type="text" v-model="ruleForm.userName" placeholder="请填写用户名称" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="userPwd">
                            <el-input type="password" v-model="ruleForm.userPwd"  auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkUserPwd">
                            <el-input type="password" v-model="ruleForm.checkUserPwd" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="fr upd-model" prop="userName">
                        <el-form-item label="用户性别">
                            <el-radio class="radio" v-model="ruleForm.userSex" label="1">男</el-radio>
                            <el-radio class="radio" v-model="ruleForm.userSex" label="0">女</el-radio>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="userPhone">
                            <el-input v-model="ruleForm.userPhone"  placeholder="请填写手机号码" @blur="customerNameCheckWay"></el-input>
                            <div class="el-form-item__error">{{customerNameData}}</div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            var checkUserName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入用户名称'));
                }else{
                    callback();
                }
            };
            var checkUserPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                }else {
                    if (this.ruleForm.userPwd !== '') {
                        this.$refs.ruleForm.validateField('checkUserPwd');
                    }
                    callback();
                }
            };
            var checkUserPwd2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.userPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkUserPhone = (rule, value, callback) => {
                var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
                if (value === '') {
                    callback(new Error('请输入联系方式'));
                }else {
                    this.ruleForm.userPhone = value.replace(/[^0-9]*/g, '');
                    if(!phoneReg.test(this.ruleForm.userPhone) ){
                        callback(new Error('请输入有效手机号'));
                    }else{
                        callback();
                    }

                }
            };

            return {
                ruleForm: {
                    userName:'',    // 用户名称
                    userPwd: '',    // 用户密码
                    checkUserPwd:'',// 用户密码
                    userSex:'1',    // 用户性别
                    userPhone:'',   // 用户手机号
                },
                rules: {
                    userName: [
                        { validator: checkUserName, trigger: 'blur' }
                    ],
                    userPwd: [
                        { validator: checkUserPwd, trigger: 'blur' }
                    ],
                    checkUserPwd: [
                        { validator: checkUserPwd2, trigger: 'blur' }
                    ],
                    userPhone: [
                        { validator: checkUserPhone, trigger: 'blur' }
                    ],
                },
                loading:false,
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.altopen('编辑成功！','success');
                        this.loading = true;
                    } else {
                        this.altopen('请把信息填写完整！','warning');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getDataList(){
                var data =  {
                    userName:'张三',    // 用户名称
                    userPwd: '123',    // 用户密码
                    checkUserPwd:'123',// 用户密码
                    userSex:'1',    // 用户性别
                    userPhone:'17888211416',   // 用户手机号
                };
                this.ruleForm = data;
                this.loading = false;
            },
            // 公共弹框
            altopen(msg,type) {
                this.$notify({
                    type:type,
                    message: msg,
                    offset: 100,
                });
            },
        },
        mounted(){
            this.getDataList();
        }
    }
</script>
<style>
    .img-upd-div{height: 134px; width: 225px; float:left; overflow: hidden;border: #ccc 1px solid;margin-bottom: 5px; margin-right: 5px; position: relative}
    .img-upd-div .el-form-item__error{ position: absolute; bottom: 0px;  text-align: center; left: 0px; width: 100%;}
    .image-list2 .img-uplod{
        position: absolute;
        z-index: 999;
        background: transparent;
        top: -24px;
        width: 100%;
        height: 160px !important;
        color: #fff;
    }

</style>
